<!-- 这是面包屑导航栏和分页的文件显示 -->
<template>
  <!-- 面包屑导航栏 -->
  <!-- 面包屑导航栏 -->
  <nav aria-label="breadcrumb" class="breadcrumb-nav p-0">
    <ol class="breadcrumb bg-light mb-0">
      <!-- 使用Bootstrap的breadcrumb类，并添加bg-light背景色 -->
      <li
        v-for="(crumb, index) in breadcrumbs"
        :key="index"
        class="breadcrumb-item"
      >
        <a
          v-if="index < breadcrumbs.length - 1"
          @click.prevent="goBack(crumb)"
          class="text-decoration-none"
          href="#"
        >
          {{ crumb.name }}
        </a>
        <span v-else class="breadcrumb-item active" aria-current="page">
          <!-- 最后一个元素使用active类 -->
          {{ crumb.name }}
        </span>
      </li>
    </ol>
  </nav>
  <div class="container p-0">
    <div class="card">
      <div class="card-body p-0" style="border: 0 !important">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="line-font">
                <input
                  type="checkbox"
                  @change="selectAllFiles"
                  v-model="selectAll"
                />
              </th>
              <th
                class="line-font"
                style="text-align: left"
                v-html="fileNameHeaderContent"
              ></th>
              <th class="line-font">操作</th>
              <th class="line-font">更新时间</th>
              <th class="line-font">文件大小</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(file, index) in files" :key="index">
              <td class="line-fonts">
                <input
                  type="checkbox"
                  v-model="file.selected"
                  @change="updateFileSelection(file)"
                />
              </td>
              <td class="line-fonts td-maging" style="text-align: left">
                <span>
                  <img
                    v-if="file.icon_url"
                    :src="file.icon_url"
                    alt="File Icon"
                    class="file-icon"
                  />
                </span>
                <span @click="handleFileNameClick(file)">{{
                  file.file_name
                }}</span>
              </td>
              <td class="line-fonts td-maging">
                <!-- 添加操作按钮或链接 -->
                <a href="#"><i class="bi bi-share"></i></a>
                <!-- <a href="#"><i class="bi bi-download"></i></a> -->
                <DownloadButton
                  ref="downloadButton"
                  :fileId="file.id"
                  :source="file.source"
                />
                <!-- <a href="#"><i class="bi bi-trash"></i></a> -->
                <DeleteButton
                  @fileDeleted="fetchFiles"
                  :itemType="file.source"
                  :itemId="file.id"
                />
                <!-- <a href="#"><i class="bi bi-input-cursor"></i></a> -->
                <RenameButton
                  @itemRenamed="fetchFiles"
                  :fileName="file.file_name"
                  :itemType="file.source"
                  :itemId="file.id"
                />
                <a href="#"><i class="bi bi-three-dots"></i></a>
              </td>
              <td class="line-fonts">{{ file.updated_at }}</td>
              <td class="line-fonts">{{ formatFileSize(file.file_size) }}</td>
            </tr>
          </tbody>
        </table>
        <nav aria-label="Page navigation" class="m-0 p-0">
          <ul class="pagination line-fonts">
            <select v-model="perPage" @change="fetchFiles">
              <option
                class="line-fonts"
                v-for="option in perPageOptions"
                :key="option"
                :value="option"
              >
                {{ option }}条/页
              </option>
            </select>
            <li class="page-item line-fonts flex-center mr-2">
              共{{ totalPages }}页
            </li>
            <li class="page-item" :class="{ disabled: currentPage === 1 }">
              <a
                class="page-link line-fonts"
                href="#"
                @click.prevent="goToPage(1)"
                >第一页</a
              >
            </li>
            <li class="page-item" :class="{ disabled: !hasPreviousPage }">
              <a
                class="page-link line-fonts"
                href="#"
                @click.prevent="loadPreviousPage"
                >上一页</a
              >
            </li>
            <li
              v-for="page in visiblePages"
              :key="page"
              class="page-item line-fonts"
              :class="{ active: currentPage === page }"
            >
              <a
                class="page-link line-fonts"
                href="#"
                @click.prevent="goToPage(page)"
                >{{ page }}</a
              >
            </li>
            <li class="page-item" :class="{ disabled: !hasNextPage }">
              <a
                class="page-link line-fonts"
                href="#"
                @click.prevent="loadNextPage"
                >下一页</a
              >
            </li>
            <li
              class="page-item"
              :class="{ disabled: currentPage === totalPages }"
            >
              <a
                class="page-link line-fonts"
                href="#"
                @click.prevent="goToPage(totalPages)"
                >最后一页</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import DownloadButton from "@/components/NetworkdiskView/FileOperateCompoent/FileManipulationWidget/DownloadButton.vue";
import DeleteButton from "@/components/NetworkdiskView/FileOperateCompoent/FileManipulationWidget/DeleteButton.vue";
import RenameButton from "@/components/NetworkdiskView/FileOperateCompoent/FileManipulationWidget/RenameButton.vue";

import axios from "axios";

export default {
  components: {
    DownloadButton,
    DeleteButton,
    RenameButton,
  },
  data() {
    return {
      files: [],
      selectAll: false, // 用于全选/全不选功能
      currentPage: 1,
      totalPages: 0,
      userId: null,
      perPage: 10, // 当前每页显示条数
      perPageOptions: [1, 5, 10, 15, 25, 50, 100], // 每页显示条数的选项
      parentFolderId: null, // 父文件夹id
      breadcrumbs: [{ id: null, name: "所有文件" }], // 用于存储面包屑导航的数据
    };
  },
  computed: {
    hasNextPage() {
      return this.currentPage < this.totalPages;
    },
    hasPreviousPage() {
      return this.currentPage > 1;
    },
    selectedFilesCount() {
      return this.files.filter((file) => file.selected).length;
    },
    fileNameHeaderContent() {
      if (this.selectedFilesCount > 0) {
        return `已选中 ${this.selectedFilesCount} 个文件/文件夹`;
      } else {
        return "文件名";
      }
    },
    visiblePages() {
      const nearbyPages = 2; // 显示当前页前后各几个页码
      const total = this.totalPages;
      let start = Math.max(1, this.currentPage - nearbyPages);
      let end = Math.min(total, this.currentPage + nearbyPages);

      // 确保始终包含第一页
      if (start > 1) {
        start = 1;
      }

      // 确保始终包含最后一页
      if (end < total) {
        end = total;
      }

      // 确保包含当前页的前一页和后一页（如果它们存在的话）
      if (this.currentPage > 1 && start !== this.currentPage - 1) {
        start = Math.max(start, this.currentPage - 1);
      }
      if (this.currentPage < total && end !== this.currentPage + 1) {
        end = Math.min(end, this.currentPage + 1);
      }

      // 生成页码数组
      return Array.from(
        { length: end - start + 1 },
        (_, index) => start + index
      );
    },
  },
  methods: {
    goBack() {
      if (this.breadcrumbs.length > 1) {
        // 移除最后一个面包屑
        this.breadcrumbs.pop();
        // 获取新的父文件夹ID（倒数第二个面包屑的id）
        this.parentFolderId =
          this.breadcrumbs[this.breadcrumbs.length - 1].id || null;
        // 使用Vuex action更新parentFolderId
        this.$store.dispatch("setParentFolderId", this.parentFolderId);
        this.fetchFiles();
      }
    },
    // goBack() {
    //   if (this.breadcrumbs.length > 1) {
    //     // 移除最后一个面包屑
    //     this.breadcrumbs.pop();
    //     // 获取新的父文件夹ID（倒数第二个面包屑的id）
    //     const newParentId =
    //       this.breadcrumbs[this.breadcrumbs.length - 1].id || null;
    //     // 使用Vuex action更新parentFolderId
    //     this.$store.dispatch("setParentFolderId", newParentId);
    //     this.fetchFiles();
    //   }
    // },
    // 多选框文件id
    updateFileSelection(file) {
      this.$store.dispatch("toggleFileSelection", {
        fileId: file.id,
        isSelected: file.selected,
        source: file.source, // 传递 source 类型到 Vuex action
      });
    },
    // 格式化文件大小，转换为KB、MB、GB等
    formatFileSize(sizeInBytes) {
      // 如果 sizeInBytes 是 undefined 或者不是一个数字，返回默认大小
      if (
        sizeInBytes === undefined ||
        isNaN(sizeInBytes) ||
        sizeInBytes === null
      ) {
        return "-";
      }

      // 格式化文件大小，转换为KB、MB、GB等
      const units = ["Bytes", "KB", "MB", "GB", "TB"];
      let unitIndex = 0;
      let size = sizeInBytes;
      while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024;
        unitIndex++;
      }
      // 保留两位小数
      return `${size.toFixed(2)} ${units[unitIndex]}`;
    },
    // 实现全选/全不选功能
    selectAllFiles() {
      const fileIds = this.files.map((file) => file.id);
      this.$store.dispatch("toggleFileSelection", {
        fileIds,
        isSelected: this.selectAll,
      });
    },
    // 下一页方法
    goToPage(page) {
      console.log("前往页码：", page); // 添加调试语句
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        this.fetchFiles();
      } else {
        console.warn(`Page ${page} out of range.`);
      }
    },
    // 从后端获取文件列表
    async fetchFiles() {
      // 从后端获取文件列表
      try {
        // 尝试从sessionStorage获取userId
        const storedDataStr = sessionStorage.getItem("vuex");
        if (!storedDataStr) {
          throw new Error('在 sessionStorage 中找不到键为"vuex"的数据');
        }

        let storedData;
        try {
          storedData = JSON.parse(storedDataStr);
          this.userId = storedData.user.id; // 直接将解析出的userId赋值给this.userId
        } catch (parseError) {
          throw new Error("无法解析 sessionStorage 中的数据", parseError);
        }

        if (!this.userId) {
          throw new Error("UserId 缺失或无效");
        }

        // 发起请求获取文件列表
        const response = await axios.get(`/api/files/${this.userId}`, {
          params: {
            page: this.currentPage,
            perPage: this.perPage, // 传递每页显示条数到后端
            parentFolderId: this.parentFolderId, // 传递父文件夹ID到后端
          },
        });
        // 检查响应数据是否包含分页信息
        if (response.data.pagination) {
          // 存在分页信息，使用它
          this.totalPages = response.data.pagination.last_page;
        } else {
          // 不存在分页信息，假设所有文件都在一页上
          this.totalPages = 1; // 设置总页数为1
          // 可能还需要重置当前页码为1，确保不会尝试访问不存在的页码
          this.currentPage = 1;
        }

        // 无论是否有分页信息，都设置文件列表
        this.files = response.data.data.map((file) => ({
          ...file,
          selected: false,
        }));
        // // 注意这里使用了 response.data.pagination.last_page 与后端响应名一致
        // this.totalPages = response.data.pagination.last_page;
        // this.files = response.data.data.map((file) => ({
        //   ...file,
        //   selected: false,
        // })); // 添加selected属性
      } catch (error) {
        console.error("提取文件时出错:", error.message);
        // 在这里可以添加额外的错误处理逻辑，比如显示一个错误消息给用户
      }
    },
    loadNextPage() {
      console.log("下一页"); // 添加调试语句
      if (this.hasNextPage) {
        // 直接访问计算属性的值，而不是调用它
        this.currentPage++;
        this.fetchFiles();
      }
    },

    loadPreviousPage() {
      console.log("上一页"); // 添加调试语句
      if (this.hasPreviousPage) {
        // 直接访问计算属性的值，而不是调用它
        this.currentPage--;
        this.fetchFiles();
      }
    },
    // 点击文件夹或者文件的时候的触发事件
    handleFileNameClick(file) {
      if (file.source === "file") {
        // 下载方法或其他处理
      } else if (file.source === "folder") {
        // 如果点击的是根目录，重置breadcrumbs
        if (file.id === null) {
          this.breadcrumbs = [{ id: null, name: "所有文件" }];
        } else {
          // 如果点击的不是根目录，则添加新的面包屑或更新当前面包屑的名称（如果已存在）
          let crumbIndex = this.breadcrumbs.findIndex(
            (crumb) => crumb.id === file.id
          );
          if (crumbIndex !== -1) {
            // 如果面包屑已存在，更新其名称（以防文件夹名称被修改）
            this.breadcrumbs[crumbIndex].name = file.file_name;
          } else {
            // 如果面包屑不存在，添加它
            this.breadcrumbs.push({ id: file.id, name: file.file_name });
          }
        }
        // 更新parentFolderId和文件列表
        this.parentFolderId = file.id === null ? null : file.id;
        // 更新parentFolderId和文件列表
        this.$store.dispatch("setParentFolderId", this.parentFolderId);
        this.fetchFiles();
      }
    },
  },
  // 在组件挂载后加载文件列表
  mounted() {
    this.fetchFiles(); // 在组件挂载后加载文件列表
  },
};
</script>

<style scoped>
/* 样式改进 */
.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-bottom: 1rem; /* 底部外边距 */
}

.pagination .page-item {
  margin: 0 0.25rem; /* 相邻页码之间的间距 */
}

.pagination .page-item .page-link {
  display: block;
  padding: 0.5rem 0.75rem; /* 内边距 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 0.25rem; /* 圆角 */
  color: #333; /* 字体颜色 */
  background-color: #fff; /* 背景颜色 */
  text-decoration: none; /* 去除下划线 */
}

.pagination .page-item.active .page-link {
  background-color: #007bff; /* 选中页码的背景颜色 */
  border-color: #007bff; /* 选中页码的边框颜色 */
  color: #fff; /* 选中页码的字体颜色 */
}

.pagination .page-item.disabled .page-link {
  color: #6c757d; /* 禁用页码的字体颜色 */
  pointer-events: none; /* 禁用点击事件 */
  background-color: #fff; /* 禁用页码的背景颜色 */
  border-color: #ddd; /* 禁用页码的边框颜色 */
}
.line-font {
  /* 按钮字体大小 */
  font-size: 13px;
  font-weight: 500;
}
.line-fonts {
  /* 按钮字体大小 */
  font-size: 11px;
  font-weight: 400;
}
.td-maging a {
  margin-right: 8px; /* 根据需要调整这个值来增加或减少间距 */
  /* padding: 2px 2px; */
}
.td-maging span {
  margin-right: 8px; /* 根据需要调整这个值来增加或减少间距 */
  /* padding: 2px 2px; */
}
/* 去除最后一个链接的右边距，避免不必要的空白 */
.td-maging a:last-child {
  margin-right: 0;
  margin-left: 8px;
}

/* 总页数标签 */
.flex-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 设置一个具体的高度，或者让它由外部因素决定 */
}

/* 面包屑导航 */
.breadcrumb-nav .breadcrumb-item {
  font-size: 14px; /* 设置字体大小为14px */
}

/* 如果需要，你还可以单独设置链接和span的字体大小 */
.breadcrumb-nav .breadcrumb-item a {
  font-size: 14px;
}

.breadcrumb-nav .breadcrumb-item.active {
  font-size: 14px;
}
</style>
